<template>
  <div class="app-container search-list model-with-line">
    <div slot="header" class="clearfix">
      <router-link :to="{name: 'member-list'}">
        <el-button plain icon="el-icon-back" size="small" :round="true">
          返回
        </el-button>
      </router-link>
    </div>
    <table-pagination
        ref="el-search-table"
        :fetch="getData"
        type="remote"
        :adaptive = "fixOption"
        :page-sizes="[20, 50, 100]"
        :columns="columns"
        :form-options="formOptions"
        list-field="records"
        total-field="totalElements"
        page-index-key="page"
        page-size-key="pageSize"
        height="300"
        method="get">
    </table-pagination>
  </div>
</template>

<script>
import TablePagination from '_c/Tables/table-pagination';
import {getMemberOrderPage} from '@/api/member';
import {currency, utcFormat} from '@/utils/filters';
import {mapGetters} from 'vuex';

export default {
    name: 'member-order',
    components: {TablePagination},
    data () {
        return {
            fixOption: {fixedHeader: true},
            pageParams: {
                page: 1,
                pageSize: 20
            },
            formParams: {

            },
            formOptions: {
                showResetBtn: false,
                showSearchBtn: false,
                inline: true,
                submitBtnText: '查询',
                size: 'small',
                resetBtnCallback: () => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                },
                forms: []
            },
            columns: [
                {label: '订单号', prop: 'orderNumber'},
                { label: '下单时间',
                    prop: 'createDate',
                    render: row => {
                        return utcFormat(row.createDate, 'YYYY-MM-DD HH:mm:ss', this.timeZone);
                    },
                    width: '180px'},
                {label: '订单状态', prop: 'statusText'},
                {label: '支付方式', prop: 'payType'},
                {label: '支付状态', prop: 'payStatusText'},
                {label: '物流状态', prop: 'logisticsStatusText'},
                {label: '商品数量', prop: 'totalItemNum'},
                { label: '订单金额',
                    prop: 'payAmount',
                    render: row => {
                        if (row.payAmount) {
                            return currency(row.payAmount, this.currencySymbol);
                        }
                        return '';
                    } }
            ]
        };
    },
    computed: {
        ...mapGetters(['siteList']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        },
        currencySymbol () {
            return this.siteInfo.currencySymbol;
        }
    },
    methods: {
        getData (params) {
            this.formParams.memberId = this.$route.params.id;
            return new Promise((resolve, reject) => {
                getMemberOrderPage({...this.formParams, ...params}).then((res) => {
                    resolve(res);
                });
            });
        }
    }
};
</script>

<style scoped lang="scss">
.search-list {
  h4 {
    border-bottom: 1px solid #E8E8E8;
    margin: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}
</style>
